axios.get('/dashboard').then(({ data: res }) => {
  // console.log(res);
  /*   结构方案1
    let {message,data:{overview,year,salaryData}} = res */
  // 结构方案2
  let { groupData, overview, provinceData, salaryData, year } = res.data


  // 最上面的概览区域
  // console.log(overview);
  // 遍历将overview中的值添加到带有name属性的盒子中去
  // 例如document.querySelector('name ="age"').innerHTML = overview.age
  for (let key in overview) {
    document.querySelector(`[name=${[key]}`).innerHTML = overview[key];
  }

  // 调用图标函数
  lineChart(year)            //折线图
  classSalaryChart(salaryData)     //饼图
  barChart(groupData)             //柱状图
  setSalaryChart(salaryData)       //饼图
  mapChart(provinceData);            //地图
})
// --------------------------------折线图
function lineChart(data) {
  let myChart = echarts.init(document.querySelector('#line'));
  let option = {
    title: {
      text: '2022全学科薪资走势',
      textStyle: {
        fontSize: 16
      },
      top: 15,
      left: 10
    },
    xAxis: {
      type: 'category',
      data: data.map(item => item.month),
      axisLabel: {
        color: '#999'
      },
      axisLine: {
        lineStyle: {
          color: '#ccc',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    // 鼠标移入显示数据
    tooltip: {
      trigger: 'axis'
    },
    // 网格
    grid: {
      top: '20%'
    },
    // 折线渐变颜色
    color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: '#499FEE' // 0% 处的颜色
      }, {
        offset: 1, color: '#5D75F0' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    series: [
      {
        data: data.map(item => item.salary),
        type: 'line',
        smooth: true,
        // 折线图线条粗细
        lineStyle: {
          width: 6
        },
        // 折线图上的圆形大小
        symbolSize: 10,
        // 面积图颜色渐变
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#499FEE' // 0% 处的颜色
            },
            {
              offset: 0.8, color: 'rgba(255,255,255,0.2)' // 0.8 处的颜色
            },
            {
              offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      }
    ]
  };
  myChart.setOption(option)
}


// ---------------------------------饼图
function classSalaryChart(data) {
  // console.log(data);
  let myChart = echarts.init(document.querySelector('#salary'));

  let option = {
    title: {
      text: '班级薪资分布',
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '6%',
      left: 'center'
    },
    color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    series: [
      {
        name: '班级薪资分布',
        type: 'pie',
        radius: ['50%', '64%'],
        // avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: '40',
        //     fontWeight: 'bold'
        //   }
        // },
        labelLine: {
          show: false
        },
        data: data.map(item => { return { value: (item.b_count + item.g_count), name: item.label } })
      }
    ]
  };
  myChart.setOption(option)
}

// ---------------------------------柱形图
function barChart(data) {
  // console.log(data);
  let myChart = echarts.init(document.querySelector('#lines'));
  let option = {
    xAxis: {
      type: 'category',
      // 将数据处理换成形参data里面传过来的数据
      // data: ['一组', '二组', '三组', '四组', '五组', '六组', '七组', '八组'],
      data: data[1].map(item => item.name),
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#ccc'
        }
      },
      color: '#999'
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    // 鼠标移入提示
    tooltip: {
      trigger: 'axis'
    },
    // 颜色渐变
    color: [{
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: '#34D39A'// 0% 处的颜色
      }, {
        offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }, {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
        offset: 0, color: '#499FEE' // 0% 处的颜色
      }, {
        offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }],
    //   网格
    grid: {
      left: 70,
      top: 30,
      reight: 30,
      bottom: 50
    },
    series: [
      {
        // data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
        data: data[1].map(item => item.hope_salary),

        type: 'bar',
        name: '期望薪资'
      }, {
        // data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
        data: data[1].map(item => item.salary),

        type: 'bar',
        name: '就业薪资'
      }
    ]
  };
  myChart.setOption(option)

  // 按钮的点击事件（委托事件）
  document.querySelector('#btns').addEventListener('click',function(e){
    // 判断点击的元素
    if(e.target.tagName==='BUTTON'){
      // 获取标签内的值
      let i = e.target.innerHTML
      // console.log(i);
      // 排他思想，添加类名
      document.querySelector('#btns .btn-blue').classList.remove('btn-blue');
      e.target.classList.add('btn-blue');

      // 更换数据
      option.xAxis.data = data[i].map(item=>item.name);
      option.series[0].data = data[i].map(item => item.hope_salary);
      option.series[1].data = data[i].map(item=>item.salary);
      // 重新创建图表
      myChart.setOption(option);
    }
  })
}


// ---------------------------------男女薪资分布
function setSalaryChart(data) {
  let myChart = echarts.init(document.querySelector('#gender'));
  let option = {
    title: [
      { text: '男女薪资分布', top: 10, left: 10 },
      { text: '男生', top: '45%', left: '45%', textStyle: { fontSize: 12 } },
      { text: '女生', top: '85%', left: '45%', textStyle: { fontSize: 12 } },
    ],
    // 鼠标移入提示
    tooltip: {
      trigger: 'item'   //这里要用item才可以
    },
    // 颜色
    color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    series: [
      {
        name: '男生薪资分布',
        type: 'pie',
        radius: ['20%', '30%'],     //内外半径
        center: ['50%', '30%'],       //圆心坐标点
        data: data.map(item => { return { value: item.b_count, name: item.label } })

      },

      {
        name: '女生薪资分布',
        type: 'pie',
        radius: ['20%', '30%'],     //内外半径
        center: ['50%', '70%'],       //圆心坐标点
        data: data.map(item => { return { value: item.g_count, name: item.label } })
      }
    ]
  };
  myChart.setOption(option)
}

// ---------------------------------地图
function mapChart(data) {
  // console.log(data);
  const mapData = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0},
    { name: '天津', value: 0},
    { name: '上海', value: 0},
    { name: '重庆', value: 0},
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0},
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0},
    { name: '安徽', value: 0},
    { name: '山东', value: 0 },
    { name: '新疆', value: 0},
    { name: '江苏', value: 0},
    { name: '浙江', value: 0},
    { name: '江西', value: 0},
    { name: '湖北', value: 0},
    { name: '广西', value: 0},
    { name: '甘肃', value: 0},
    { name: '山西', value: 0 },
    { name: '内蒙古', value:0},
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0},
    { name: '贵州', value: 0},
    { name: '广东', value: 0},
    { name: '青海', value: 0},
    { name: '西藏', value: 0},
    { name: '四川', value: 0},
    { name: '宁夏', value: 0},
    { name: '海南', value: 0},
    { name: '台湾', value: 0},
    { name: '香港', value: 0},
    { name: '澳门', value: 0}
  ]
  // 遍历需要的地图数据
  mapData.forEach(item=>{
    // 遍历服务器给的数据
   let res =  data.find(v=>{
    // 判断服务器数据是否包含需要的数据，返回结果
      return v.name.includes(item.name)
    })
    // console.log(res);
    if(res){
      // 将包含的数据的value值替换，记得将地图数据中的value清零
      item.value = res.value
    }
  })
  let myChart = echarts.init(document.querySelector('#map'));
  let option = {
    title: {
      text: '籍贯分布',
      left: 10,
      top: 10,
      fontSize: 16
    },
    // 鼠标移入提示
    tooltip: {
      formatter: '{b}: {c}位学员',
      borderColor: 'transprant',
      backgroundColor: 'rgba(0,0,0,0.5)',
      textStyle: {
        color: '#fff'
      }
    },
    // 视觉映射组件
    visualMap: {
      // 连续性
      type: 'continuous',
      // 断点式
      // type: 'piecewise',
      min: 0,
      max: 6,
      text: [6, 0],
      left: 40,
      bottom: 20,
      inRange: {
        color: ['#fff', '#0075F0']
      }
    },
    series: [{
      // 提示的时候用
      name: '籍贯分布',
      // 类型是地图
      type: 'map',
      // 是中国地图
      map: 'china',
      // 地图里面的文字
      data: mapData,
      label: {
        show: true,
        color: 'rgba(0,0,0,0.7)',
        fontSize: 10
      },
      // 地图每一项的设置
      itemStyle: {
        areaColor: '#E0FFFF',
        borderColor: 'rgba(0, 0, 0, 0.2)',
      },
      // 鼠标移入状态
      emphasis: {
        itemStyle: {
          areaColor: '#34D39A',
          borderWidth: 0,
          shadowBlur: 20,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
    ]
  };
  myChart.setOption(option)
}
